<template>
	<el-dialog
		width="800px"
		:show-close="false"
		:modal="false"
		:center="true"
		:visible.sync="isShow"
	>
		<question-editor ref="editor" :value="value" :options="{height: 250}" />
		<template #footer>
			<el-button @click="isShow = false">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import QuestionEditor from "./editor.vue";
	export default {
		props: {
			// 是否显示弹窗,可通过.sync进行绑定
			visibly: {
				type: Boolean,
				default: false
			},
			// 编辑器内默认展示的内容
			value: {
				type: String,
				default: ""
			}
		},
		components: {
			QuestionEditor
		},
		data() {
			return {
				isShow: this.visibly // 内部的是否显示弹窗
			};
		},
		watch: {
			// 内部和外部的变量双向绑定
			isShow(val) {
				this.$emit("update:visibly", val);
			},
			visibly(val) {
				this.isShow = val;
			}
		},
		methods: {
			onSubmit() {
				this.$emit("submit", this.$refs.editor.api_getHtml());
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .el-dialog__header {
		height: 0;
	}
</style>
